<script setup lang="ts">
interface IProps {
  name?: string;
  size: "large" | "middle" | "small";
}

withDefaults(defineProps<IProps>(), {
  size: "large",
});
</script>

<template>
  <div
    :class="{
      head: true,
      [size]: true,
    }"
  >
    {{ name?.slice(-2) }}
  </div>
</template>

<style scoped lang="scss">
.head {
  background: var(--primary-color);
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.large {
  width: 48px;
  height: 48px;
}
.middle {
  width: 36px;
  height: 36px;
  font-size: 12px;
}
.small {
  width: 30px;
  width: 30px;
}
</style>
